<script setup lang="ts">
  import { ref, watch } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: () => false,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'reject', value: string): void
  }>()

  const visible = ref(props.modelValue)
  const form = ref({
    remark: '',
  })

  const onClose = () => {
    visible.value = false
    form.value.remark = ''
    emits('update:modelValue', visible.value)
  }

  watch(props, (value) => {
    visible.value = value.modelValue
  })
</script>

<template>
  <h-dialog v-model="visible" title="确认驳回吗?" :loading="props.loading" @close="onClose">
    <el-form class="modal_form_content reject_form" label-position="top">
      <el-form-item label="驳回备注">
        <el-input
          v-model.trim="form.remark"
          maxlength="400"
          placeholder="请填写驳回备注"
          type="textarea"
          show-word-limit
          resize="both"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <h-button is-modal type="primary" @click="emits('reject', form.remark)">驳回</h-button>
      <h-button is-modal @click="onClose">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  .reject_form {
    :deep(.el-form-item) {
      .el-form-item__content {
        .el-textarea {
          .el-textarea__inner {
            width: 100% !important;
            min-height: 75px !important;
            max-height: 215px !important;
          }
        }
      }
    }
  }
</style>
